<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>


    <!-- Screen -->
    <!-- https://developer.mozilla.org/zh-CN/docs/Web/API/Screen -->
    <!-- Screen 接口表示一个屏幕窗口，往往指的是当前正在被渲染的window对象，可以使用 window.screen 获取它。 -->

    <p>Screen.height</p>
    <!-- https://developer.mozilla.org/zh-CN/docs/Web/API/Screen/height -->
    <!-- 返回屏幕的高度（单位：像素）。 -->
    <p>Screen.width</p>
    <!-- https://developer.mozilla.org/zh-CN/docs/Web/API/Screen/width -->
    <!-- 返回屏幕的宽度。 -->
    <hr>
    <script>
        console.log('screen.height is ' + screen.height);
        console.log('screen.width is ' + screen.width);
    </script>

    <p>Screen.availHeight</p>
    <!-- https://developer.mozilla.org/zh-CN/docs/Web/API/Screen/availHeight -->
    <!-- 返回浏览器窗口在屏幕上可占用的垂直空间，即最大高度。 -->
    <p>Screen.availWidth</p>
    <!-- https://developer.mozilla.org/zh-CN/docs/Web/API/Screen/availWidth -->
    <!-- 返回浏览器窗口可占用的水平宽度（单位：像素）。 -->
    <script>
        console.log('screen.availHeight is ' + screen.availHeight);
        console.log('screen.availWidth is ' + screen.availWidth);
    </script>

    <p>Screen.pixelDepth</p>
    <!-- https://developer.mozilla.org/zh-CN/docs/Web/API/Screen/pixelDepth -->
    <!-- 返回屏幕的位深度/色彩深度（bit depth）。根据CSSOM( CSS对象模型 )视图，为兼容起见，该值总为24。 -->
    <p>Screen.colorDepth</p>
    <!-- https://developer.mozilla.org/zh-CN/docs/Web/API/Screen/colorDepth -->
    <!-- 返回屏幕的颜色深度（color depth）。根据CSSOM( CSS对象模型 )视图，为兼容起见，该值总为24。 -->
    <script>
        console.log('screen.pixelDepth is ' + screen.pixelDepth);
        console.log('screen.colorDepth is ' + screen.colorDepth);
    </script>

</body>

</html>